<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加自定义css属性</title>
	<script>
        // js写法

		// // Houdini API
		// CSS.registerProperty({
		// 	name: '--my-color',
		// 	syntax: '<color>',
		// 	inherits: false,
		// 	initialValue: 'red',
		// });
	</script>
	<style>
		

		.box {
			width: 400px;
			height: 60px;
			--my-color: #c0ffee;
			background: linear-gradient(to right, #fff, var(--my-color));
			transition: --my-color 1s ease-in-out;
		}

		.box:hover {
			--my-color: #b4d455;
		}

		.box1 {
			width: 400px;
			height: 60px;
			background: linear-gradient(to right, #fff, #c0ffee);
			transition: all 1s ease-in-out;
		}

		.box1:hover {
			background: linear-gradient(to right, #fff, #b4d455);
		}
		/* css写法 */
		/* Houdini API */
		@property --my-color {
			syntax: '<color>';
			initial-value: red;
			inherits: false;
		}
	</style>
</head>

<body>
	<div class="box">有过渡效果</div>
	<div class="box1">无过渡效果</div>
</body>

</html>